<template>
  <div class="login_container">
    <el-row>
      <el-col :span="12" :xs="0"></el-col>
      <el-col :span="12" :xs="24">
        <el-form class="login_from" :model="loginForm" :rules="rules" ref="loginForms">
          <h1>Hello</h1>

          <h2>欢迎来到硅谷甄选</h2>

          <el-form-item prop="username">
            <el-input placeholder="请输入用户名" :prefix-icon="User" v-model="loginForm.username"></el-input>
          </el-form-item>

          <el-form-item prop="password">
            <el-input type="password" placeholder="请输入密码" :show-password="true" :prefix-icon="Lock"
              v-model="loginForm.password"></el-input>
          </el-form-item>

          <el-form-item>
            <el-button :loading="loading" class="login_button" type="primary" size="default"
              @click="login">登录</el-button>
          </el-form-item>


        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang='ts' name='login'>
import { User, Lock } from '@element-plus/icons-vue'
import { reactive, ref } from 'vue';
import useUserStore from '@/store/modules/user';
import { useRouter, useRoute } from 'vue-router';
import { ElNotification } from 'element-plus';
import { getTime } from '@/utils/time';

const $router = useRouter();
const $route = useRoute();

let loading = ref(false);

let loginForms = ref();


let loginForm = reactive({
  username: 'admin',
  password: '111111'
})

const userStore = useUserStore();

//自定义校验规则
const validatorUserName = (rule: any, value: any, callback: any) => {
  callback()
}

const validatorPassWord = (rule: any, value: any, callback: any) => {
  callback()
}

// 表单校验规则对象
const rules = {
  username: [
    // {required:true,min:6,max:12,message:'用户名长度在6-12之间',trigger:'blur'}
    { trigger: 'blur', validator: validatorUserName, required: true }
  ],
  password: [
    // {required:true,min:6,max:15, message:'密码长度在6-15之间',trigger:'blur'}
    { trigger: 'blur', validator: validatorPassWord }
  ]
}

/// 提交
const login = async () => {
  // 表单校验通过后使用
  await loginForms.value.validate();

  // 加载按钮
  loading.value = true;


  // 发起登录请求
  try {
    await userStore.userLogin(loginForm);

    ///跳转判断
    let redirect: any = $route.query.redirect;
    $router.push({
      path: redirect || '/'
    });


    ElNotification({
      title: `Hi,${getTime()}`,
      message: '欢迎来到硅谷甄选',
      type: 'success',
      duration: 2000
    });

  } catch (error) {

    ElNotification({
      type: 'error',
      message: (error as Error).message,
    })
  } finally {
    loading.value = false;
  }
}



</script>

<style scoped lang='scss'>
.login_container {
  width: 100%;
  height: 100vh;
  background: url('@/assets/images/background.jpg') no-repeat;
  background-size: cover;
}

.login_from {
  display: inline-block;
  width: 80%;
  top: 30vh;
  position: relative;
  background: url('@/assets/images/login_form.png') no-repeat;
  background-size: cover;
  padding: 40px;

  h1 {
    color: white;
    font-size: 40px;
  }

  h2 {
    color: white;
    font-size: 20px;
    margin: 20px 0;
  }

  .login_button {
    width: 100%;
  }
}
</style>